import { useState } from "react";
import { View } from "@tarojs/components";
import { ITab } from "@/components/index";
import { useDidShow } from "@tarojs/taro";
import { getSchoolSubjectList } from "@/axios/common";
import Apply from "./components/apply";
import ELPIndex from "./components/ELP/index";
import MLPIndex from "./components/MLP/index";
import PTIndex from "./components/PT/index";
import MIIndex from "./components/MI/index";
import SIIndex from "./components/SI/index";
import OIIndex from "./components/OI/index";

import "./index.scss";

interface PersonalizedAdviceProps {}

const tabsMap = [
  {
    label: "英语能力情况",
    value: 0,
    id: 5,
    components: <ELPIndex />,
  },
  {
    label: "数学能力情况",
    value: 1,
    id: 6,
    components: <MLPIndex />,
  },
  {
    label: "性格类型情况",
    value: 2,
    id: 1,
    components: <PTIndex />,
  },
  {
    label: "多元智能",
    value: 3,
    id: 4,
    components: <MIIndex />,
  },
  {
    label: "学科兴趣",
    value: 4,
    id: 2,
    components: <SIIndex />,
  },
  {
    label: "职业兴趣",
    value: 5,
    id: 3,
    components: <OIIndex />,
  },
];

const PersonalizedAdvice: React.FC<PersonalizedAdviceProps> = () => {
  const [flag, setFlag] = useState<boolean>(true);
  const [currentTab, setCurrentTab] = useState<number>(0);
  const [tabsData, setTabsData] = useState<any[]>([]);

  const handleClickShowAdvice = () => {
    setFlag(false);
    // 后续根据查询到的学校 功能列表 过滤 tabsMap
    getSchoolSubjectData();
  };

  useDidShow(() => {
    if (!flag) getSchoolSubjectData();
  });

  const getSchoolSubjectData = async () => {
    try {
      const results = await getSchoolSubjectList();
      const ids: any[] = results.map((item) => item.subjectId);
      const result: any[] = [];
      tabsMap.map((item) => {
        if (ids.includes(item.id) || item.id == 0) result.push(item);
      });
      setTabsData(result);
    } catch {}
  };

  if (flag) {
    return <Apply handleClickShow={handleClickShowAdvice} />;
  }

  return (
    <View className="index">
      <ITab
        tabData={tabsData}
        currentTab={currentTab}
        onChangeTab={(value: number) => setCurrentTab(value)}
      />
    </View>
  );
};

export default PersonalizedAdvice;
